<!-- 右键操作弹窗 -->
<template>
<div v-if="visible" class="context-menu-wp" :style="{top: top, left: left}">
  <div v-if="!list.length" class="empty">请配置菜单列表</div>
  <template v-else>
    <div v-for="(item, index) in list" :key="index" class="item" @click="item.fn ? item.fn(detail) : ''">{{item.name}}</div>
  </template>
</div>
</template>
<script>
export default {
  data () {
    return {
      visible: false,
      top: '300px',
      left: '300px',

      detail: null
    }
  },
  props: {
    // 右键菜单列表{name: '添加', fn: () {}}
    list: {
      default () {
        return []
      }
    }
  },
  watch: {
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.close)
      } else {
        document.body.removeEventListener('click', this.close)
      }
    }
  },
  methods: {
    open (event, data) {
      this.top = event.clientY + 'px';
      this.left = event.clientX + 'px';
      this.detail = data;

      this.visible = true;
    },

    close () {
      this.visible = false;
    }

  }
}
</script>
<style lang="scss" scoped>
.context-menu-wp {
  position: fixed;
  z-index: 10;
  top: 300px;
  left: 300px;
  padding: 4px 0;
  min-width: 52px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border-radius: 4px;
  .empty {
    line-height: 70px;
    width: 130px;
    text-align: center;
    color: #aaa;
  }
  .item {
    padding: 5px 12px;
    lien-height: 22px;
    color: rgba(0,0,0,.65);
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    transition: all .3s;
    &:hover {
      background: #e6f7ff;
    }
  }
}
</style>